<template>
  <div style="height: 100%;background-color:white ;padding: 5px">
    <el-container>
      <el-aside style="width: 200px;">
        <MenuItem v-for="(field, index) in tasks" :key="index" :index="index"
                  :item="field" :reorder="false" @change-selection="refreshList(index)"></MenuItem>
      </el-aside>
      <el-main>
        <PreviewDialog ref="preview"
                       :calculatorSore="calculatorSore"
                       :describeContent="describeContent"
                       :fields="fields"
                       :medicalCalculatorData="medicalCalculatorData"
                       :type="cntFormulaType"/>
        <el-row>
          <el-col :span="6">
            <div style="display: inline-block">
              <div style="display: inline-block"><span></span></div>
            </div>
          </el-col>
          <el-col :span="10">
            <el-radio-group v-model="status" size="small" style="margin-left: 140px;" @change="valueChange()">
              <el-radio-button label="">全部</el-radio-button>
              <el-radio-button label="1">未审核</el-radio-button>
              <el-radio-button label="2">审核通过</el-radio-button>
              <el-radio-button label="3">驳回</el-radio-button>
            </el-radio-group>
          </el-col>
          <el-col :span="8">
            <MedicalCalculatorAuditSearch v-model="status" @confirm="refreshTableData"></MedicalCalculatorAuditSearch>
          </el-col>
        </el-row>
        <el-row style="margin-top: 10px;">
          <el-col :span="24">
            <el-table highlight-current-row :data="tableData" :height="tableHeight" border>
              <el-table-column label="公式名称" min-width="300" prop="formulaName">
                <template slot-scope="scope">
                  <span v-html="scope.row.formulaName"></span>
                </template>
              </el-table-column>
              <el-table-column v-for="(item,index) in tableInnerData[0]" :key=index :label="item.name">
                <template slot-scope="scope">
                  <span v-for="(item2,index2) in scope.row.medicalCalculatorFieldList"
                        v-if="index2 == index"> {{ item2.property }} </span>
                </template>
              </el-table-column>
              <el-table-column label="关联平台" min-width="150" prop="property"></el-table-column>
              <el-table-column label="状态" prop="data_status" width="200">
                <template slot-scope="scope">
                  <span v-if="0 === scope.row.data_status " style="color: #00AB44">未提交</span>
                  <span v-if="1 === scope.row.data_status " style="color: #FF8C00">未审核</span>
                  <span v-if="2 === scope.row.data_status ">审核通过</span>
                  <span v-if="3 === scope.row.data_status " style="color: #EC0000">未通过<el-popover
                    :content="content1"
                    trigger="hover"
                    v-on:show="openShow(scope.$index)">
    <el-button slot="reference" style="margin-left: 10px" type="text"><a style="color: #EC0000">驳回原因</a> </el-button>
  </el-popover><i class="el-icon-warning-outline el-icon--right"></i></span>
                </template>
              </el-table-column>
              <el-table-column label="创建人" min-width="100" prop="createdBy"></el-table-column>
              <el-table-column :formatter="dateFormat" label="提交审核日期" min-width="160"
                               prop="createdTime"></el-table-column>
              <el-table-column label="操作列">
                <template slot-scope="scope">
                  <span><el-link type="primary" @click.prevent="showPreviewDialog(scope.row.id)">详情</el-link></span>
                  <!-- 1:状态为未审核  -->
                  <span><el-link v-if="1 === scope.row.data_status" type="primary"
                                 @click.prevent="goToEditor(scope.row.id)">审核</el-link></span>
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-pagination v-if="multiplePages" :page-size="pageSize" :total="totalNum" background
                         layout="total, prev, pager, next, jumper" style="text-align: right;margin-top: 10px"
                         @current-change="handleCurrentChange"></el-pagination>
        </el-row>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import MedicalCalculatorAuditSearch from "./MedicalCalculatorAuditSearch";
import moment from "moment";
import PreviewDialog from "./exportModel/PreviewDialog";
import MenuItem from "../common/MenuItem";

export default {
  name: "MedicalCalculatorAuditTable",
  components: {
    MenuItem,
    MedicalCalculatorAuditSearch,
    PreviewDialog
  },
  data() {
    return {
      previewDialogVisible: false,
      medicalCalculatorData: [],
      calculatorSore: [],
      describeContent: '',
      fields: [],
      cntFormulaType: 1,
      multiplePages: true,
      noData: true,
      totalNum: 0,
      currentPage: 0,
      pageSize: 10,
      tableData: [],
      tableInnerData: [],
      tableHeight: '',
      status: '',
      content1: '',
      editVisible: false,
      editId: '',
      name: '',
      subject: '',
      createdBy: '',
      platform: '',
      createdTime: '',
      tasks: [{
        id: "aaa",
        name: "常见200种疾病更新",
        selected: true
      }, {
        id: "bbb",
        name: "药物相互作用100条更新",
        selected: false
      }, {
        id: "ccc",
        name: "罕见病知识整理",
        selected: false
      }]
    }
  },
  methods: {
    showPreviewDialog: function (id) {
      let that = this
      this.axios.get('/pmph/action/medicalCalculator/selectDataById', {
        params: {
          id: id,
        }
      }).then((response) => {
        that.medicalCalculatorData = response.data.medicalCalculatorData
        that.calculatorSore = response.data.calculatorSore
        that.describeContent = response.data.describeContent
        if (!this.describeContent) {
          this.describeContent = '无'
        }
        that.fields = response.data.fields
        that.cntFormulaType = response.data.type
        this.previewDialogVisible = true
      })
    },
    handleCurrentChange: function (val) {
      this.currentPage = val - 1;
      const that = this;
      this.getTableData();
    },
    valueChange: function () {
      this.currentPage = 0;
      this.getTableData(this.status);
    },
    refreshTableData(nv, totalNum, name, subject, createdBy, platform, createdTime) {
      this.tableData = nv
      this.totalNum = totalNum
      this.name = name
      this.subject = subject
      this.createdBy = createdBy
      this.platform = platform
      this.createdTime = createdTime
    },
    goToEditor(id) {
      this.$router.push({
          path: '/formula/editor',
          query: {id: id, auditStatus: 'audit'}
        }
      )
    },
    dateFormat: function (row, column) {
      const date = row[column.property]
      if (date === undefined) {
        return ''
      }
      return moment(date).format("YYYY-MM-DD  HH:mm:ss")
    },
    openShow: function (index) {
      this.content1 = this.tableData[index].rejectReason
    },
    getTableData: function () {
      this.axios.get('/pmph/action/medicalCalculator/selectMedicalCalculatorAuditList', {
        params: {
          currentPage: this.currentPage,
          pageNum: this.pageSize,
          name: this.name,
          subject: JSON.stringify(this.subject),
          status: this.status
        }
      }).then((response) => {
        this.noData = response.data.totalNum <= 0;
        this.tableData = response.data.tableData;
        this.totalNum = response.data.totalNum;
        this.$emit("getAuditTable")
        this.$emit('Confirm', response.data.tableData, response.data.totalNum)
        this.showAdvance = false;
      }).catch((error) => {
        console.error(error);
        this.tableData = [];
        this.noData = true;
        this.$message.error("未能请求到数据");
      })
    },
    refreshList(index) {
      this.setAllItemsUnselected()
      this.tasks[index].selected = true
    },
    setAllItemsUnselected() {
      this.tasks.forEach(field => {
        field.selected = false
      })
    }
  },
  created() {
    this.tableHeight = CONST.WORKSPACE_HEIGHT - 216;
    this.axios.get('/pmph/action/medicalCalculator/selectMedicalCalculatorAuditList', {
      params: {
        currentPage: this.currentPage,
        pageNum: this.pageSize,
        name: this.name,
        subject: JSON.stringify(this.subject),
        createdBy: this.createdBy,
        platform: this.platform,
        updateTime: this.createdTime.toString(),
        status: this.status
      }
    }).then((response) => {
      this.noData = response.data.totalNum <= 0;
      this.tableData = response.data.tableData;
      this.totalNum = response.data.totalNum;
      for (let i = 0; i < response.data.tableData.length; i++) {
        this.tableInnerData.push(response.data.tableData[i].medicalCalculatorFieldList);
      }
    }).catch((error) => {
      console.error(error);
      this.tableData = [];
      this.noData = true;
      this.$message.error("未能请求到数据");
    })
  }
}
</script>

<style scoped>

</style>
